~{template "public/header" .}~

<style>
    /* #app {
        margin: 0 auto;
    } */

    #app .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
    }
</style>
<!-- 加载需要的组件 -->
~{template "components/jielong_add_form" .}~
~{template "components/jielong_add_success" .}~
<div id="app" v-loading="false">

    <div class="container">
        <jielong-add-success v-if="addSuccess" :jielong-item="jielongItem"></jielong-add-success>
        <jielong-add-form v-else @on-success="onSuccess"></jielong-add-form>
    </div>
</div>

<script>
    window.app = new Vue({
        el: '#app',
        data: function () {
            return {
                addSuccess: false,
                jielongItem: {},
            }
        },
        methods: {
            onSuccess(e) {
                this.jielongItem = e;
                this.addSuccess = true;
                console.log('onSuccess', e);
            }
        }
    })
</script>

~{template "public/footer" .}~